<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>考勤记录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <script type="text/javascript" src="../static/layui/layui.js" charset="utf-8"></script>
    <!--    &lt;!&ndash; 引入 layui.css &ndash;&gt;-->
    <!--    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">-->

    <!--    &lt;!&ndash; 引入 layui.js &ndash;&gt;-->
    <!--    <script src="https://www.layuicdn.com/layui/layui.js">-->
    <script type="text/javascript" src="../static/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-bg-gray" style="padding: 30px;">
        <form onsubmit="return false">
            <el-row>
                <el-col span="8">
                    年份:&nbsp;
                    <select id="year"></select>
                </el-col>
                <el-col span="8">
                    学期:&nbsp;
                    <select id="semester">
                        <option value="春">春季学期</option>
                        <option value="秋">秋季学期</option>
                    </select>
                </el-col>
                <button onclick="requestData()" style="text-align: center">检索</button>
            </el-row>
        </form>
        <br/>
        <table id="studentAbsenceRecord" class="layui-table">

        </table>
    </div>
</div>
<script type="text/html" id="barView">
    {{#  if(d.absenceCondition == '请假'){ }}
    <a class="layui-btn layui-btn-xs" lay-event="">请假</a>
    {{# } }}
    {{#  if(d.absenceCondition == '缺席'){ }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="">缺席</a>
    {{# } }}
</script>
<script th:inline="none">
    // window.onload= function (){
    //     //获取当前年份
    //     var year = new Date().getFullYear();
    //     //获取下拉列表
    //     var sel = document.getElementById("year");
    //     //循环添加2006年至当前年份的每个年份到下拉列表
    //     for (var i = year; i > 2006;i--){
    //         var option = document.createElement('option');
    //         option.value = i;
    //         var txt = document.createTextNode(i);
    //         option.appendChild(txt);
    //         sel.appendChild(option);
    //     }
    // }

    //获取当前年份
    var year = new Date().getFullYear();
    //获取下拉列表
    var sel = document.getElementById("year");
    //循环添加2006年至当前年份的每个年份到下拉列表
    for (var i = year; i > 2006;i--){
        var option = document.createElement('option');
        option.value = i;
        var txt = document.createTextNode(i);
        option.appendChild(txt);
        sel.appendChild(option);
    }

    function requestData(){
        //获取选择的年份
        var options_year = $("#year option:selected");
        var year = options_year.val();
        //获取选择的学期
        var options_semester = $("#semester option:selected");
        var semester = options_semester.val();
        //确定查询的成绩所在的时间范围
        var date;
        if (semester == "春"){
            date=year+"-8-1";//月份参数值要比实际需要的值小1
        }else if (semester == "秋"){
            year=(+year)+1;
            date=year+"-2-1";
        }else {
            console.log("日期选择异常");
        }
        layui.use('table', function (){
           var table = layui.table;

           table.render({
               elem: '#studentAbsenceRecord'
               ,url: 'http://localhost:8080/absenceRecordQuery/'
               ,where: {date:date } //如果无需传递额外参数，可不加该参数
               // ,method: 'post' //如果无需自定义HTTP类型，可不加该参数
               ,cellMinWidth: 80
               ,page: true
               ,cols: [[
                   {field: 'studentID', width: 120, title: '学号'}
                   ,{field: 'studentName', width: 100, title: '姓名'}
                   ,{field: 'courseName', width: 120, title: '课程名称'}
                   ,{field: 'teachClassName', width: 120, title: '教学班'}
                   ,{field: 'absenceDate', width: 120, title: '时间', sort: true}
                   ,{field: 'absenceSection', width: 100, title: '课程节次'}
                   ,{field: 'absenceCondition', width: 150, title: '考勤结果', hide: true}
                   , {fixed: 'right', title: '考勤结果', toolbar: '#barView', width: 120, align: 'center'}
               ]]
           });
        });
    }
</script>
</body>
</html>